<template>
  <div id="search-page" class="article-list">
    <div class="list-cover">
      <img class="list-cover-img" src="/images/list_bg.jpg">
      <p class="list-cover-icon">
        <img src="/images/search.png">
      </p>
      <p class="list-cover-desc ellipsis">“{{route.query.keyword}}” 相关文章</p>
    </div>
    <el-skeleton :rows="15" animated :loading="skeletonShow"/>
    <div class="article-list" v-if="!skeletonShow">
      <article-item v-for="item in list" :key="item.id" :data="item"></article-item>
      <article-empty v-if="total===0"></article-empty>
    </div>
    <div class="page" v-if="!skeletonShow">
      <el-pagination
        background
        :currentPage="page"
        :page-size="limit"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="pageChange">
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
const { public: { apiBase },public: { siteTitle } } = useRuntimeConfig()
const route = useRoute()
const { articleApi } = useApi()
const skeletonShow = ref(true)
const page = ref(Number(route.query.page)||1)
const limit = 8
const setHead = () => {
  useHead({
    title:`${route.query.keyword}|${siteTitle}`,
    meta: [
       {
         hid: 'description',
         name: 'description',
         content: String(route.query.keyword)||'达文西的快乐星球，个人技术博客'
       },
       {
         hid: 'keywords',
         name: 'keywords',
         content: `${route.query.keyword},达文西的快乐星球,SNBLOG`
       }
     ]
  })
}
let {data:{total},data:{list}} = await articleApi.getList({page:page.value,limit:limit,title:route.query.keyword})
skeletonShow.value = false
setHead()
const pageChange = async (value:number) => {
  page.value = value
  await navigateTo({
    path:'/search',
    query:{
      page:value,
      title:route.query.keyword
    }
  })
}
watch(() => route.query, async ()=>{
  skeletonShow.value = true
  const {data:{total:resultTotal},data:{list:resultList}} = await articleApi.getList({page:page.value,limit:limit,title:route.query.keyword})
  total = resultTotal
  list = resultList
  skeletonShow.value = false
})
</script>

<style lang="less">
  @import "../assets/styles/pages/article-list.less";
</style>
